<template>
  <div id="tree-table-con" class="g-treetable-page">
    <g-banner :title="'权责清单查询'" :des="'应用于权责清单'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">权责清单查询</h2>
      </div>
    </a-affix>
    <div class="tree-con g-box" :style="'height:'+ tableHeight">
      <div class="g-tree-title g-title-box" >
        <div class="g-left-float">
          <i class="el-icon-menu g-icon-span"><span>全部分类</span></i>
        </div>
        <div class="g-right-float g-left-line">
          <el-select class="g-select-none" v-model="params.province" size="mini" clearable filterable placeholder="省">
            <el-option
              v-for="item in mapList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div
          class="g-type-div-class"
          @click="clickquery(index)"
          v-for="(item,index) in typeList"
          :key="index"     
        >
          <a href="#" class="g-a" :class="typeIndex == index? 'g-type-active':'' ">
            <span class="g-left-float">{{item.label}}</span>
            <span class="g-right-float g-list-item-num list-item-active">{{item.num}}</span>
          </a>
        </div>
      </div>
    </div>
    <div class="table-con g-box" ref="tableCon">
      <div class="toolbar">
        <el-form label-width="100px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="事项编码">
                <el-input v-model="params.thingCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事项名称">
                <el-input v-model="params.thingName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div style="float:right">
                <el-button type="primary" @click="clickSelect">查询</el-button>
                <el-button type="primary" @click="clickRerset">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="code" label="事项编码"></el-table-column>
        <el-table-column prop="name" label="事项名称" width="380"></el-table-column>
        <el-table-column prop="mechanism" label="事项机构"></el-table-column>
        <el-table-column prop="thingType" label="事项类型"></el-table-column>
      </el-table> -->
      <el-table :data="cosumerData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center" v-if="columnVisible[0]"></el-table-column>
        <el-table-column label="消费者名称" header-align="center" width="220px" v-if="columnVisible[1]">
          <div slot-scope="scope" class="consumer-name">
            <img src="@/assets/img/icon-consumer.png">
            <el-button type="text" @click="handleDetail(scope.row)">{{scope.row.consumerName}}</el-button>
          </div>
        </el-table-column>
        <el-table-column label="消费者编码" prop="consumerNameCode" align="center" v-if="columnVisible[2]"></el-table-column>
        <el-table-column label="调用次数" prop="invoke" align="center" v-if="columnVisible[3]"></el-table-column>
        <el-table-column label="状态" header-align="center" width="100px" v-if="columnVisible[4]">
          <div slot-scope="scope">
            <div v-if="scope.row.status == 0">
              <div class="dot dot-green"></div>
              <span>已发布</span>
            </div>
            <div v-if="scope.row.status == 1">
              <div class="dot dot-orange"></div>
              <span>草稿</span>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="是否启用" align="center" v-if="columnVisible[5]">
          <div slot-scope="scope">
            <el-switch v-model="cosumerData[scope.$index].isEnable" @change="handleEnable(scope.row)"></el-switch>
          </div>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <div slot-scope="{row}" class="g-operation-column">
            <el-button type="text" @click="handleEdit(row)">修改</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
            <el-button type="text">更多</el-button>
          </div>
        </el-table-column>
        <el-table-column width="50" align="right">
          <div slot="header" class="g-more-column">
            <el-dropdown trigger="click" :hide-on-click="false">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[0]">序号</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[1]">消费者名称</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-checkbox v-model="columnVisible[4]">状态</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      class="pull-right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 25]"
      background
      :page-size="pageSize"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :hide-on-single-page="false"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import { getNormalTableData } from '@/api/normal-table'

import { getScrollingCon } from "@/util/common";
import { queryTableList } from "@/api/responsibility.js";
export default {
  name: "Responsibility",
  data() {
    return {
      tableHeight: "auto",
      currentPage: 1,
      pageSize: 10,
      total: 100,

      mapList: [
        { label: "山东省", value: 0 },
        { label: "山西省", value: 1 },
        { label: "湖北省", value: 2 }
      ], // 省份
      typeList: [
        //类型
        { label: "全部", value: "", num: 150 },
        { label: "行政许可", value: "", num: 150 },
        { label: "行政处罚", value: "", num: 150 },
        { label: "行政强制", value: "", num: 150 },
        { label: "行政征收", value: "", num: 150 },
        { label: "行政给付", value: "", num: 150 },
        { label: "行政裁决", value: "", num: 150 }
      ],
      typeIndex:null,
      params: {
        // 筛选条件
        province: "", //省
        thingCode: "", //事项编码
        thingName: "", //事项名称
        typeValue:"",//选择测列表
      },
      tableData: [],
      cosumerData: [],
       // 【表格】
      columnVisible: [true, true, true, true, true, true],
    };
  },
  created() {
    this.loadNormalTableData()
  },
  components: {},
  methods: {
    getScrollingCon,

    loadNormalTableData() {
      getNormalTableData().then((result) => {
        this.cosumerData = result.data.list
        this.$nextTick(()=>{
          this.tableHeight = this.$refs.tableCon.offsetHeight+'px'
        })
      }).catch(() => {
        this.tableHeight = 'auto'
      })
    },
  
    // 点击查询
    clickSelect() {
      this.loadNormalTableData()
    },
    // 点击左侧列表
    clickquery(index) {
      console.log(index);
      this.typeIndex = index;
      let list = this.typeList;
      this.params.typeValue = list[index].value;
      this.getTableList();
    },
    // 点击重置
    clickRerset() {
      Object.assign(this.$data.params, this.$options.data().params);
    },
    handleCurrentChange() {},
    handleSizeChange() {}
  }
};
</script>